<template>
	<div class="dailyEventAdmin" v-loading="dailyEventAdminLoading">
		<div class="title">事件管理</div>
    <div class="searchBox">
      <el-form ref="form" :model="searchForm" size="mini" inline>
        <el-form-item label="站点名称"  label-width="90px">
          <!-- <el-input v-model="searchForm.enterpriseName" placeholder="请输入企业名称"></el-input> -->
          <el-select v-model="searchForm.station" placeholder="请选择水站名称">
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item" se></el-option>
            </p>
          </el-select>
        </el-form-item>
        <el-form-item label="时间" label-width="60px">
          <el-date-picker
            v-model="searchForm.time"
            type="date"
            style="width: 100%"
            value-format="yyyy-MM-dd"
            placeholder="选择开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="事件编号" label-width="90px">
          <el-input v-model="searchForm.name" placeholder="请输入事件编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="onSubmit({pageSize: pageSize, pageNum: 1})">确定</el-button>
          <el-button type="primary" class="greenBtn" size="mini" @click="added">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="tableBox">
      <el-table :data="eventAdmin.data" border size="mini"
        style="width: 100%" :header-cell-style="{color: '#666', backgroundColor: '#feedcf'}"
      > 
        <el-table-column
          prop="name"
          label="事件编号"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="eventName"
          label="事件名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="事件类型"
          align="center">
        </el-table-column>
        <el-table-column
          prop="gmtCreate"
          label="事件时间"
          align="center">
        </el-table-column>
        <el-table-column
          prop="address"
          label="事件地址"
          align="center">
        </el-table-column>
        <el-table-column
          prop="receUser"
          label="接收人"
          align="center">
        </el-table-column>
        <el-table-column
          prop="content"
          label="事件内容"
          align="center">
        </el-table-column>
        <el-table-column
          prop="createUser"
          label="发起人"
          align="center">
        </el-table-column>
        <!-- <el-table-column
          prop="time"
          label="发起时间"
          align="center">
        </el-table-column> -->
        <el-table-column
          type="expand"
          label="照片"
          align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.path">
              <viewer :images="scope.row.path">
                <img v-for="item of scope.row.path" :key="item" :src="'http://47.112.16.168:' + item" class="imgItem">
              </viewer>
            </div>
            <div v-else>
              <p>暂无图片</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <myPaging :func="pageUpdate" :total="eventAdmin.total"></myPaging>

    <el-dialog width="70%" :visible.sync="addedFormVisible" append-to-body>
      <div slot="title">
        <p>新增</p>
      </div>
      <el-form :model="addedForm" :rules="addedFormRules" size="mini" ref="addedForm" label-width="100px" v-loading="addedFormLoading">
        <el-row>
          <el-col :span="12">
            <el-form-item label="时间" prop="gmtEvent" >
              <el-date-picker
                v-model="addedForm.gmtEvent"
                type="date"
                style="width: 100%"
                value-format="yyyy-MM-dd"
                placeholder="选择开始日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="事件类型" prop="type" >
              <el-input v-model="addedForm.type" placeholder="请填写事件类型"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="站点" prop="address" >
              <el-select v-model="addedForm.address" placeholder="请选择水站名称">
                <p v-for="(item, index) of stationList" :key="index">
                  <el-option :label="item" :value="item" se></el-option>
                </p>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="receUser" >
              <el-select v-model="addedForm.receUser" :loading="receUserLoading" placeholder="请选择接收人" @focus="receUserFocus">
                <p v-for="(item, index) of userAdminList.data" :key="index">
                  <el-option :label="item.username" :value="item.username" se></el-option>
                </p>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="事件名称" prop="eventName" >
              <el-input v-model="addedForm.eventName" placeholder="请填写事件名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- <el-form-item label="联系电话" prop="phone" >
              <el-input v-model="addedForm.phone" placeholder="请填写联系电话"></el-input>
            </el-form-item> -->
          </el-col>
        </el-row>
        <el-form-item label="事件内容" prop="content" style="width: 100%">
          <el-input type="textarea" :rows="4" v-model="addedForm.content" placeholder="请填写事件内容"></el-input>
        </el-form-item>
        <el-form-item label="上传图片" label-width="100px" style="margin-top: 15px;" prop="photoFiles">
          <el-upload
            ref="addUploadPhoto"
            action=""
            :file-list="addedForm.files"
            list-type="picture-card"
            multiple
            :limit="4"
            :on-change="uploadChange"
            :on-exceed="uploadExceed" 
            :http-request="handleSubmit"
            :auto-upload="false"
          >
            <i class="el-icon-plus"></i>
            <!-- <el-button>点击上传</el-button> -->
            <!-- <span slot="tip" class="uploadTip">请上传身份证正反面</span> -->
          </el-upload>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="发起人" prop="createUser" >
              <el-input v-model="addedForm.createUser" placeholder="请填写发起人" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" class="greenBtn" size="mini" @click="addedSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
	</div>
</template>
<script>
import { mapActions, mapGetters} from "vuex"
import myPaging from '@/components/myPaging.vue'
export default {
  name: 'dailyEventAdmin',
  data () {
    return {
      msg: 'hello dailyEventAdmin!',
      dailyEventAdminLoading: false,
      receUserLoading: false,
      searchForm: {
        station: '',
        time: '',
        name: ''
      },
      addedFormVisible: false,
      addFormData: {},
      addedFormLoading: false,
      addedForm: {
        gmtEvent: '',
        type: '',
        address: '',
        receUser: '',
        eventName: '',
        content: '',
        photoFiles: [],
        createUser: "",
        remark: '',
      },
      addedFormRules: {
        gmtEvent: [
          { type: 'string', required: true, message: '请选择时间', trigger: 'change' }
        ],
        // type: [
        //   { required: true, message: '请选择事件类型', trigger: 'change' }
        // ],
        address: [
          { required: true, message: '请选择水站', trigger: 'change' }
        ],
        receUser: [
          { required: true, message: '请输入接收人', trigger: 'blur' },
        ],
        eventName: [
          { required: true, message: '请输入事件名称', trigger: 'blur' },
        ],
        content: [
          { required: true, message: '请输入事件内容', trigger: 'blur' },
        ],
        createUser: [
          { required: true, message: '请输入发起人', trigger: 'blur' },
        ],
        photoFiles: [
          { required: true, message: '请选择照片', trigger: 'change' },
        ],
      },
		}
  },
	methods: {
    ...mapActions([
      'getEventAdminListData',
      'uplaodEventAdmin',
      'fetchUserList'
    ]),
    async onSubmit(pageOption = {pageSize: this.pageSize, pageNum: 1}) {
      this.dailyEventAdminLoading = true
      await this.getEventAdminListData({...this.searchForm, ...pageOption})
      this.dailyEventAdminLoading = false
    },
    pageUpdate(option) {
      this.onSubmit(option)
    },
    async addedSubmit() {
      this.$refs['addedForm'].validate(async (valid) => {
        if(valid) {
          if(this.addedForm.photoFiles.length > 0) {
            this.addedFormLoading = true
            this.addFormData = new FormData()
            let addedForm = this.addedForm
            this.$refs.addUploadPhoto.submit()
            for(let i in addedForm) {
              this.loopAppend(this.addFormData, i, addedForm[i])
            }
            let result = await this.uplaodEventAdmin(this.addFormData)
            if(result.message !== 'success') {
              this.$notify({
                type: 'warning',
                title: '提示',
                message: result.info,
              })
            }else {
              this.$notify({
                type: 'success',
                title: '成功',
                message: result.info,
              })
              this.$refs['addedForm'].resetFields();
              this.addedFormVisible = false
              this.onSubmit()
            }
            this.addedFormLoading = false
          }else {
            this.$notify.warning({
              title: '警告',
              message: '最少上传1张图片',
            })
          }
        }else {
          return false;
        }
      })
    },
    added() {
      this.addedFormVisible = true
      this.addedForm.createUser = this.userInfo.user.username
    },
    uploadChange(file, fileList){
			this.addedForm.photoFiles = fileList
    },
    uploadExceed() {
			this.$notify.warning({
				title: '警告',
				message: '最多上传4张图片',
			})
    },
    handleSubmit(response) {
			this.addFormData.append('files', response.file)
    },
    loopAppend(formData, key, value) {
      formData.append(key, value)
    },
    async receUserFocus() {
      this.receUserLoading = true
      await this.fetchUserList({
        account: '',
        role: '',
        pageSize: 99999,
        pageNum: 1
      })
      this.receUserLoading = false
    }
  },
  created() {
    this.onSubmit()
  },
  computed: {
    ...mapGetters({
      stationList: 'getStationList',
      eventAdmin: 'getEventAdmin',
      userAdminList: 'getUserAdminList',
      userInfo: 'getUserInfo',

      //分页依赖
      pageSize: 'getPageSize',
    })
  },
  components: {
    myPaging
  }
}
</script>
<style scoped>
.dailyEventAdmin {
  background: #fff;
  padding: 0 20px 0 20px;
  min-height: 100%;
}
.dailyEventAdmin .title {
  position: relative;
  left: 15px;
  line-height: 70px;
  font-size: 16px;
}
.dailyEventAdmin .title::before {
  content: '';
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}
.searchBox {
  background: #fff;
  margin-bottom: 15px;
}
.searchBox .line {
  text-align: center;
}
.dailyEventAdmin .imgItem {
  max-width: 200px;
  margin-right: 15px;
}
</style>
